<template>
  <div class="get-book">
    <div class="cont" v-if="!isBook">请先完成所有课程学习</div>

    <div class="yes-book-box" v-else>
      <div class="title">恭喜您已完成所有课程学习，请填写邮寄地址，证书将在3日内为您邮寄。</div>
      <div v-if="!ifAddRess">
        <van-form @submit="onSubmit">
          <van-field
            v-model="form.name"
            name="姓名"
            label="姓名"
            placeholder="请输入姓名"
            :rules="[{ required: true, message: '请填写真实姓名' }]"
          />
          <van-field
            v-model="form.phone"
            name="电话"
            label="电话"
            placeholder="请输入电话"
            :rules="[{ required: true, message: '请填写电话' }]"
          />
          <van-field
            v-model="form.address"
            name="地址"
            label="地址"
            placeholder="请输入地址"
            :rules="[{ required: true, message: '请填写地址' }]"
          />
          <div class="pay-title">注：您也可以使用电脑登录中装协官网，在官网上下载电子证书。官网链接：www.cbda1984.com</div>
          <div style="margin: 16px;">
            <van-button color="#0050A5" round block type="info" native-type="submit">提交</van-button>
          </div>
        </van-form>
      </div>
      <div v-else>
        <van-cell-group>
          <van-cell title="姓名" :value="form.name" />
          <van-cell title="电话" :value="form.phone" />
          <van-cell title="地址" :value="form.address" />
        </van-cell-group>
        <div class="pay-title">注：您也可以使用电脑登录中装协官网，在官网上下载电子证书。官网链接：www.cbda1984.com</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ActivityList',
  props: {
    playList: {
      type: Array,
      default: () => [],
    },
    isBook: {},
    ifAddRess: {},
  },
  components: {},
  data() {
    return {
      form: {},
    }
  },
  methods: {
    handSta() {},
    async onSubmit() {
      this.$emit('onSubmit')
    },
  },
  mounted() {},
}
</script>

<style lang='scss'>
@import '@/assets/css/base';
.get-book {
  padding-bottom: 260px;
  .cont {
    color: #333;
    font-size: px2rem(30);
    margin-bottom: 25px;
  }
  .yes-book-box {
    .title {
      font-size: px2rem(30);
      line-height: 22px;
      color: #333;
      margin-bottom: 25px;
    }
    .pay-title {
      color: #d71a1a;
      font-size: px2rem(26);
      line-height: 22px;
      margin-top: 30px;
    }
  }
}
</style>
